<!-- 支付框 -->
<template>
  <cube-popup type="my-popup" position="bottom"
              :maskClosable="true" v-model="popVisible">
    <div class="m-payment-wrap">
      <div class="m-popup-head" v-if="setTimeout">请在<span>{{ time }}s</span>内输入支付密码完成支付</div>
      <div class="m-popup-head" v-else>请输入支付密码</div>
      <div class="pwd-input">
        <div v-for="item in 6" class="pwd-input-item">
<!--          <span>{{ pwdMds.length >= item ? pwdMds[item-1] : '' }}</span>-->
          <i :num="pwdMds.length >= item ? 'v' : ''"></i>
        </div>
      </div>
      <table class="pwd-nums" @click="tapPwdNum">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td class="fbg empty" @click.stop="emptyAll"></td>
          <td>0</td>
          <td class="fbg del" @click.stop="delItem"><img src="~assets/images/del.png" /></td>
        </tr>
      </table>
    </div>
  </cube-popup>
</template>

<script>
    import {checkAgentPayPassword } from 'api'
    import md5 from 'js-md5';

  export default {
    props: {
        setTimeout: {
            type: Boolean,
            default: true
        }
    },
    data(){
      return {
          time: 59,
          popVisible: false,
          pwdMds: []
      }
    },
      watch: {
          popVisible(nv){
              if(this.setTimeout){
                  if(nv){
                      this.startTimeout()
                  }else{
                      this.endTimeout()
                  }
              }
          },
          pwdMds(val){
              if(val.length == 6){
                  //alert(val.join(''))
                this.verifyPwd(val)
              }
          }
      },
    methods: {
        startTimeout(){
            this.time = 59
            this.setInterval = setInterval(()=>{
                if(this.time < 1){
                    this.endTimeout()
                    return this.payTimeout()
                }
                --this.time
            }, 1000)
        },
        endTimeout(){
          clearInterval(this.setInterval)
        },
        payTimeout(){
            this.hide()
            this.$emit('verifyTimeout')
        },
        async verifyPwd(payPassword){
            if(this.verifying){
                return
            }
            this.verifying = true
            try {
                let {data} = await checkAgentPayPassword({uid: this.uid, password: md5(payPassword.join(''))})
                this.verifying = false
                this.emptyAll()
                this.$emit('verifySuc', {u: data.u})
            }catch(e) {
                //this.$emit('verifySuc')
                this.pwdMds=[]
                this.$warn(e.info)
                this.verifying = false
            }

        },
      show(){
            this.pwdMds=[]
        this.popVisible = true
      },
        hide(){
            this.popVisible = false
        },
        tapPwdNum(e){
          let {target} = e
            let btn
            if(target.tagName == 'TD'){
              this.addItem(target.innerText.trim())
            }
        },
        addItem(val){
            let {pwdMds} = this
          if(pwdMds.length < 6){
              pwdMds.push(val)
          }
        },
        delItem(){
          let {pwdMds} = this
          if(pwdMds.length){
              pwdMds.splice(pwdMds.length - 1, 1)
          }
        },
        emptyAll(){
          this.pwdMds = []
        }
    }
  }
</script>

<style lang="scss">
  @import "~common/scss/variable";

  .m-payment-wrap {
    background: #fff;
  }

  .m-popup-head {
    height: 88px;
    border-bottom: 1px solid #F5F5F5;
    font-size:34px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    span {
      color: #EB3257;
      padding: 0 5px;
    }
  }

 .pwd-input {
   height:88px;
   display: flex;
   justify-content: center;
   margin: 43px auto 0 auto;
   .pwd-input-item {
     height: 100%;
     width: 114px;
     border: 2px solid rgba(209,209,209,1);
     border-right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     //margin-right: -2px;
     &:first-of-type {
       border-radius:10px 0 0 10px;
     }
     &:last-of-type {
       border-radius: 0 10px 10px 0;
       border-right: 2px solid rgba(209,209,209,1);
     }
     /*span {*/
     /*  opacity: 0;*/
     /*  width: 0;*/
     /*  height: 0;*/
     /*  &:not(:empty) {*/
     /*    &~i {*/
     /*      opacity: 1;*/
     /*    }*/
     /*  }*/
     /*}*/
     i {
       opacity: 0;
       width:20px;
       height:20px;
       border-radius:50%;
       background:#333;
       color: #333;
       overflow: hidden;
       /*&:not(:empty) {*/
       /*  opacity: 1;*/
       /*}*/
       &[num=v] {
         opacity: 1;
       }
     }
   }

 }

  .pwd-nums {
    margin-top: 164px;
    width: 100%;
    td {
      text-align: center;
      vertical-align: middle;
      border: 1px solid rgba(245,245,245,1);
      height: 114px;
      width: 33.33333%;
      background: #fff;
      color:rgba(32,44,91,1);
      font-size: 50px;
      &:first-of-type {
        border-left: 0;
      }
      &:last-of-type {
        border-right: 0;
      }
      &:active{
        background:rgba(0,0,0,0.15);
      }
    }
    tr {
      &:last-of-type {
        tr {
          border-bottom: 0;
        }
      }
    }
    .fbg {
      background:#e3e7ee;
    }
    .del {
      img {
        width: 44px;
        height: 32px;
      }
    }
  }


</style>
